<template>
  <div class="index-container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <van-image width="100%" height="100%" fit="cover" :src="item.url" />
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar style="background: #f5f5f5" left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item :key="item.id" v-for="item in noticeList">{{
          item.content
        }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-tabs sticky color="pink" title-active-color="pink" scrollspy>
      <van-tab :title="item.title" v-for="item in tabsList" :key="item.id">
        <div v-html="item.content" style="padding: 0 10px"></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { getBanner } from '@/api/banner'
import { getNotice } from '@/api/notice'
import { getTabs } from '@/api/index'

import { ref, onMounted, onBeforeUnmount } from 'vue'

// import { useUserStore } from '@/stores'
// import { useRouter } from 'vue-router'
// const store = useUserStore()
// const router = useRouter()

const bannerList = ref([])
const noticeList = ref([])
const tabsList = ref([])

onMounted(() => {
  getBannerHandler()
  getNoticeHandler()
  getTabsHandler()
})
// 获取tabs数据
const getTabsHandler = async () => {
  const res = await getTabs()
  tabsList.value = res.data
}

// 获取轮播图
const getBannerHandler = async () => {
  const res = await getBanner()
  bannerList.value = res.data
}

// 获取公告
const getNoticeHandler = async () => {
  const res = await getNotice()
  noticeList.value = res.data
}

// const out = () => {
//   showConfirmDialog({
//     title: '提示',
//     message: '您确定要退出登录吗？',
//   })
//     .then(() => {
//       router.push('/login')
//       store.DELETE_USER()
//     })
//     .catch(() => {})
// }
</script>

<style scoped lang="less">
.index-container {
  background-color: #fff;
}
.my-swipe .van-swipe-item {
  height: 200px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
<style lang="less" scoped>
::v-deep table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid #ccc !important;
  th,
  td {
    border: 1px solid #ccc !important;
    padding: 5px !important;
  }
}
</style>
